<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>


    <!-- Common plugins -->
    <link href="${pageContext.request.contextPath}../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/pace.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}../../static/css/metismenu.min.css" rel="stylesheet">
    <!-- dataTables -->
    <link href="${pageContext.request.contextPath}../../static/css/jquery.datatables.min.css" rel="stylesheet"
          type="text/css">
    <link href="${pageContext.request.contextPath}../../static/css/responsive.bootstrap.min.css" rel="stylesheet"
          type="text/css">
    <!--template css-->
    <link href="${pageContext.request.contextPath}../../static/css/style.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath}../../static/css/jquery-ui.css" rel="stylesheet">

    <script src="${pageContext.request.contextPath}../../static/js/html5shiv.min.js"></script>
    <script src="${pageContext.request.contextPath}../../static/js/respond.min.js"></script>
</head>
<body>
<%--    弹窗--%>
<div id="dialog-form" style="overflow: hidden" title="审核销售订单">

    <h4 style="margin: auto">审核</h4>
</div>
<!-- /vertical form -->
<%--    弹窗--%>
<div id="dialog-form1" style="display: none" title="审核销售订单">
    <h4 style="margin: auto">创建产品订单</h4>
</div>
<!-- /vertical form -->


<!--page header start-->
<div class="page-header">
    <div class="row">
        <div class="col-sm-6">
            <h4>Orders</h4>
        </div>
        <div class="col-sm-6 text-right">
            <ol class="breadcrumb">
                <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                <li>销售管理</li>
                <li>销售订单</li>
            </ol>
        </div>
    </div>
</div>
<!--page header end-->


<!--start page content-->

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <table id="datatable1" class="table table-striped dt-responsive nowrap table-hover">
                    <thead>
                    <tr id="t1">
                        <th>
                            <strong>订单编号</strong>
                        </th>
                        <th>
                            <strong>客户名称</strong>
                        </th>
                        <th>
                            <strong>客户联系方式</strong>
                        </th>
                        <th>
                            <strong>总金额</strong>
                        </th>
                        <th>
                            <strong>接单时间</strong>
                        </th>
                        <th>
                            <strong>订单状态</strong>
                        </th>
                        <th>
                            <strong>操作</strong>
                        </th>
                    </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>

<!--end page content-->
<!--Start footer-->
<footer class="footer">
    <span>Copyright &copy; 2016. Float</span>
</footer>
</body>

<script src="${pageContext.request.contextPath}../../static/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/pace.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jasny-bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.slimscroll.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.nanoscroller.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/metismenu.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/float-custom.js"></script>

<!-- Datatables-->
<script src="${pageContext.request.contextPath}../../static/js/jquery.datatables.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/datatables.responsive.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}../../static/js/jquery.ui.custom.js"></script>


<script>

    let dataTable = $('#datatable1').DataTable({
        // 设置列定义
        columns: [
            {data: 'salesOrderNo'},
            {data: 'customName'},
            {data: 'customPhone'},
            {data: 'totalPrice'},
            {data: 'salesOrderTime'},
            {data: 'salesOrderStatus'}
        ]
    });
    getSalesDetails();

    function getSalesDetails() {

        $.ajax({
            "url": "sales/getSalesDetails",                      // 要提交的URL路径
            "type": "get",                     // 发送请求的方式
            "data": {},                      // 要发送到服务器的数据
            "dataType": "json",                   // 期望接受的数据格式
            "success": function (result) {  // 请求成功后要执行的代码
                if (result.code !== 200) {
                    alert(result.msg)
                } else {
                    result = result.data
                    console.log(result)

                    let Details = ''; // 存储拼接的HTML字符串
                    let getSalesDetails = '';
                    for (let index in result) {

                        var salesOrderStatus = result[index].salesOrderStatus;
                        var statusText = '';
                        var stateClass = '';
                        // 根据销售订单状态判断填入的数据
                        if (salesOrderStatus === '1') {
                            getSalesDetails = "";
                            statusText = '未支付';
                            stateClass = "label label-info"
                        } else if (salesOrderStatus === '2') {
                            statusText = '等待接单';
                            stateClass = "label label-success";
                            getSalesDetails = `<button onclick="checkOut(${result[index].salesOrderId},
                             '${salesOrderStatus}')" style="background-color:rgb(88,180,224);color:white" class="btn btn-default" id="dialog-form-opener"
                             type="button">CheckOut</button>
                            `;
                        } else if (salesOrderStatus === '3') {
                            getSalesDetails = "";
                            stateClass = "label label-default"
                            statusText = '订单取消';
                        } else if (salesOrderStatus === '4') {
                            getSalesDetails = "";
                            stateClass = "label label-indigo"
                            statusText = '全额退款';
                        } else if (salesOrderStatus === '5') {
                            getSalesDetails = "";
                            stateClass = "label label-danger"
                            statusText = '部分退款';

                        } else if (salesOrderStatus === '6') {
                            getSalesDetails = "";
                            stateClass = "label label-warning"
                            statusText = '代付尾款';
                        } else if (salesOrderStatus === '10') {
                            getSalesDetails = "";
                            stateClass = "label label-teal"
                            statusText = '等待行政接收';
                        } else if (salesOrderStatus === '8') {
                            stateClass = "label label-success"
                            statusText = '订单完成';
                        } else if (salesOrderStatus === '9') {
                            getSalesDetails = "";
                            stateClass = "label label-danger"
                            statusText = '用户申请退款';
                        } else if (salesOrderStatus === '7') {
                            getSalesDetails = "";
                            stateClass = "label label-primary"
                            statusText = '订单进行中';
                        } else if (salesOrderStatus === '11') {
                            getSalesDetails = "";
                            stateClass = "label label-danger"
                            statusText = '行政拒绝';
                        } else {
                            getSalesDetails = "";
                            stateClass = "label label-default"
                            statusText = '未知状态';
                        }
                        Details += `
                         <tr>
                         <td>${result[index].salesOrderNo}</td>
                         <td>${result[index].customName}</td>
                         <td>${result[index].customPhone}</td>
                         <td>${result[index].totalPrice}</td>
                         <td>${result[index].salesOrderTime}</td>
                         <td> <span class="${stateClass}" style="">${statusText}</span> </td>
                         <td>${getSalesDetails}</td>
                         </tr>`;
                    }

                    // 拼接HTML字符串
                    if (dataTable) {
                        dataTable.destroy(); // 销毁旧的DataTable实例
                    }
                    dataTable.rows.add(result).draw();
                    $('#datatable1 tbody').html(Details); // 更新表格数据
                    dataTable = $('#datatable1').DataTable({
                        "order": [[0, 'asc']], // 默认按第一列升序排序
                        "paging": true // 启用分页功能，根据需求设置其他分页选项
                    });
                }
            }, "error": function () {
                alert("数据响应时间过长！请重新加载")
            }
        });
    }

    function checkOut(salesOrderId, salesOrderStatus) {
        $('#dialog-form').dialog('open');
        $('#dialog-form').dialog({
            autoOpen: false,
            modal: true,
            width: 500,
            buttons: {
                通过: function () {
                    $('#dialog-was').dialog('open');
                    $('#dialog-was').dialog({
                        autoOpen: false,
                        modal: true,
                        width: 500,
                        buttons: {}
                    });
                    console.log(JSON.stringify(salesOrderId))
                    $.ajax({
                        "url": "sales/" + salesOrderId,                      // 要提交的URL路径
                        "type": "post",                     // 发送请求的方式
                        "data": {},                      // 要发送到服务器的数据
                        "dataType": "json",                   // 期望接受的数据格式
                        "contentType": "application/json;charset=utf-8;",
                        "success": function (result) {  // 请求成功后要执行的代码
                            if (result.code !== 200) {
                                alert(result.msg)
                            } else {
                                location.reload(); // 刷新页面
                            }
                        },
                        "error": function () {           // 请求失败后要执行的代码
                            alert("出错了！")
                        }
                    });


                    $(this).dialog('close');
                },
                不通过: function () {
                    $(this).dialog('close');
                }
            }
        });

    }

    function checkOrderForm() {


        // 初始化弹窗
        $('#dialog-form1').dialog({
            autoOpen: true,
            modal: true,
            width: 500,
            buttons: {
                通过: function () {
                    $('#dialog-form1').dialog('open');
                    // 这里可以添加“通过”按钮的其他代码
                },
                不通过: function () {
                    $(this).dialog('close');
                }
            }
        });
        ;
    }
</script>
</html>